<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>登录</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="css/doctor.css" />
		<style type="text/css">
			body {
				background: white;
			}
			.van-cell {
				align-items: center;
			}
			.van-icon__image {
				width: 0.4rem;
				height: 0.4rem;
				object-fit: contain;
			}
			.van-hairline--top-bottom::after,
			.van-hairline-unset--top-bottom::after {
				border-width: 0;
			}
			.van-cell-group {
				border-bottom: 1px solid #ededed;
			}
			.van-checkbox {
				font-size: 14px;
			}
			.van-button--info {
				color: #fff;
				background-color: #e22e30;
				border: 1px solid #e22e30;
			}
			.van-button--primary {
				background: #e22e30;
				border: var(--van-button-border-width) solid #e22e30;
			}
			.van-checkbox__icon .van-icon {
				width: 12px;
				height: 12px;
				line-height: 1;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="doctorIndex_container">
				<div class="doctorIndex_icon">
					<img src="img/logo.png" />
				</div>
				<div class="doctorIndex_main">
					<p>您好！欢迎登录毅瑭科技</p>
					<div class="">
						<van-cell-group>
							<van-field
								left-icon="img/phone.png"
								v-model="tel"
								maxlength="11"
								type="tel"
								placeholder="请输入手机号码"
							/>
						</van-cell-group>
						<van-cell-group>
							<van-field
								left-icon="img/password.png"
								v-model="verificationCode"
								type="number"
								placeholder="请输入验证码"
							>
								<template #button>
									<van-button
										size="small"
										type="primary"
										:class="countdown ?'reg_active':'reg_disActive'"
										@click="getCode"
									>
										<span v-if="countdown">{{text}}</span>
										<span v-if="!countdown">{{text}}{{count}}</span>
									</van-button>
								</template>
							</van-field>
						</van-cell-group>
					</div>
					<div class="agree" v-if="role=='doctor'">
						<van-checkbox
							v-model="checked"
							icon-size="12px"
							checked-color="#E22E30"
							>我已阅读并同意<span
								style="color: #e22e30"
								@click="linkToAgreement"
								>《医生服务协议》</span
							></van-checkbox
						>
					</div>
					<div class="login_btn">
						<van-button round type="info" size="large" @click="login"
							>登录</van-button
						>
					</div>
				</div>
			</div>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js?time=202208231849"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../common/js/api/vue3-axios-utils.js'

		const PatientData = {
			data() {
				return {
					url: {
						getCode: '/sys/sms',
						doctorLogin: '/sys/phoneLogin/doctor',
						patLogin: '/sys/phoneLogin/patient',
						noPhoneDoctorLogin: '/201/02/2010210',
						noPhonePatLogin: '/patient/pa/synchMobile',
					},
					userid: '',
					doctorId: '',
					checked: false,
					verificationCode: '', //收到的验证码
					countdown: true, //验证码的状态，默认显示发送验证码
					count: '', //60秒倒计时
					timer: null,
					text: '发送验证码',
					tel: '',
				}
			},
			created() {
				this.role = url('?role')
				this.userid = url('?userid') || ''
				this.doctorId = url('?doctorId') || ''
			},
			methods: {
				handleGetCode() {
					postAction(spliceUrl(this.url.getCode), {
						mobile: this.tel,
						smsmode: 0,
					}).then(res => {
						res = res.data
						console.log('getCode', res)
						if (res.success) {
							this.$toast.success('发送成功')
						} else {
							this.$toast.fail(res.message)
						}
					})
				},
				handleDoctorLogin() {
					if (this.verificationCode) {
						if (!this.doctorId) {
							postAction(spliceUrl(this.url.doctorLogin), {
								mobile: this.tel,
								captcha: this.verificationCode,
							}).then(res => {
								res = res.data
								console.log('handleDoctorLogin', res)
								if (res.success) {
									if (res.code == 200) {
										if (!res.result.doctorId) {
											this.$toast.fail('数据异常，无法登录')
											return false
										}
										localStorage.setItem('did', res.result.doctorId)
										window.location.href =
											'./editDoctorInfo.html?id=' + res.result.doctorId
									} else {
										this.$toast.fail(res.message)
									}
								} else {
									this.$toast.fail(res.message)
								}
							})
						} else {
							postAction(spliceUrl(this.url.noPhoneDoctorLogin), {
								doctorId: this.doctorId,
								phone: this.tel,
								smscode: this.verificationCode,
							}).then(res => {
								res = res.data
								console.log('handleNoPhoneDoctorLogin', res)
								if (res.success) {
									if (res.code == 200) {
										localStorage.setItem('did', res.result)
										// window.location.href='./doctorStudio.html'
										window.location.href =
											'./editDoctorInfo.html?id=' + res.result + '&status=0'
									} else {
										this.$toast.fail(res.message)
									}
								} else {
									this.$toast.fail(res.message)
								}
							})
						}
					} else {
					}
				},
				handlePatientLogin() {
					if (this.verificationCode) {
						if (!this.userid) {
							postAction(spliceUrl(this.url.patLogin), {
								mobile: this.tel,
								captcha: this.verificationCode,
							}).then(res => {
								res = res.data
								console.log('handlePatientLogin', res)
								if (res.success) {
									if (res.code == 200) {
										localStorage.setItem('pid', res.result.patientId)
										// window.location.href='../patient/patientStudio.html?id='+res.result.patientId
										window.location.href =
											'../fileSetting/information/baseInfo.html?from=roleIndex&userid=' +
											res.result.patientId
									} else {
										this.$toast.fail(res.message)
										console.log(res.message)
									}
								} else {
									this.$toast.fail(res.message)
								}
							})
						} else {
							postAction(spliceUrl(this.url.noPhonePatLogin), {
								patientId: this.userid,
								phone: this.tel,
								smsmode: this.verificationCode,
							}).then(res => {
								res = res.data
								console.log('handleNoPhonePatLogin', res)
								if (res.success) {
									if (res.code == 200) {
										localStorage.setItem('pid', res.result)
										// window.location.href='../patient/patientStudio.html?id='+res.result
										window.location.href =
											'../fileSetting/information/baseInfo.html?from=roleIndex&userid=' +
											res.result
									} else {
										this.$toast.fail(res.message)
										console.log(res.message)
									}
								} else {
									this.$toast.fail(res.message)
								}
							})
						}
					} else {
					}
				},
				getCode() {
					if (
						/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
							this.tel
						)
					) {
						const TIME_COUNT = 60
						if (!this.timer) {
							this.handleGetCode()
							this.count = TIME_COUNT
							this.countdown = false
							this.text = '重新发送'
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= TIME_COUNT) {
									this.count--
								} else {
									this.countdown = true
									clearInterval(this.timer)
									this.timer = null
								}
							}, 1000)
						}
					} else {
						this.$toast.fail('请输入正确的手机号码')
					}
				},
				login() {
					if (!this.tel) {
						this.$toast.fail('请输入正确的手机号码')
					} else if (!this.verificationCode) {
						this.$toast.fail('请输入验证码')
					} else if (this.role == 'doctor') {
						if (this.checked == false) {
							this.$toast('请仔细阅读并同意相关协议与政策')
						} else {
							this.handleDoctorLogin()
						}
					} else {
						this.handlePatientLogin()
					}
				},
				linkToAgreement() {
					window.location.href = 'agreement.html'
				},
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
